<template>
  <div class="beacon-application">
    <el-tabs v-model="activeName" @tab-click="initIframe">
      <el-tab-pane
        v-for="item in tabsList"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      >
      </el-tab-pane>
    </el-tabs>
    <div
      class="iframe"
      v-loading="loading"
      element-loading-text="正在加载页面，请稍候！"
    >
      <iframe
        style="width: 100%; height: 100%"
        :id="'iframe' + activeName"
        :src="iframeUrl"
        frameborder="no"
      ></iframe>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import md5 from "js-md5";
export default {
  data() {
    return {
      activeName: "tagInfo",
      loading: false,
      tabsList: [
        {
          label: "标签信息",
          name: "tagInfo",
        },
        {
          label: "告警记录",
          name: "alarm-record",
        },
        {
          label: "轨迹查询",
          name: "trace-search",
        },
        {
          label: "区域分析",
          name: "area-analysis",
        },
      ],
      token: ''
    };
  },
  computed: {
    iframeUrl() {
      return `${window.$CONFIG.Beacon_Url}/localsense/#/SingleModule/index/${this.activeName}`;
    },
  },
  async mounted() {
    const salt = "abcdefghijklmnopqrstuvwxyz20191107salt";
    const result = await axios({
      method: "post",
      url: window.$CONFIG.Beacon_Url + "/localsense/login",
      headers: {
        "content-type": "application/json",
      },
      data: {
        username: window.$CONFIG.Beacon_Username,
        password: md5(md5(window.$CONFIG.Beacon_Password) + salt),
      },
    });
    this.token = result.data.data;
    this.initIframe();
  },
  methods: {
    initIframe() {
      this.$nextTick(() => {
        const iframeId = ("#iframe" + this.activeName).replace(/\//g, "\\/");
        const iframe = document.querySelector(iframeId);
        window.addEventListener("message", (e) => {
          console.log('===',e);
          if (!e.data.ready) return;
          iframe.contentWindow.postMessage(
            {
              token: this.token,
              username: window.$CONFIG.Beacon_Username,
            },
            "*"
          );
        });
      });
      // if (iframe.attachEvent) {
      //   this.loading = true;
      //   iframe.attachEvent("onload", function () {
      //     _this.loading = false;
      //   });
      // } else {
      //   this.loading = true;
      //   iframe.onload = function () {
      //     _this.loading = false;
      //   };
      // }
    },
  },
};
</script>

<style scoped>
::v-deep .el-tabs__nav-wrap {
  padding: 0 20px;
}
/* ::v-deep .el-tabs {
  height: 100%;
}
::v-deep .el-tabs__content {
  height: calc(100% - 60px);
}
::v-deep .el-tab-pane {
  height: 100%;
} */
.beacon-application {
  padding-top: 10px;
  height: calc(100vh - 50px);
}
.iframe {
  height: calc(100% - 60px);
  /* height: 100%; */
  /* overflow: scroll; */
}
</style>

